<template>
  <!-- 分包预留页面 -->
  <view class="pageLayout" @click="showList = false">
    <u--form
      labelPosition="top"
      :model="form"
      :rules="rules"
      ref="uForm"
      labelWidth="300rpx"
    >
      <view class="base_info">
        <u-form-item label="用户昵称" prop="realName" borderBottom>
          <u--input
            v-model="form.realName"
            border="none"
            placeholder="请输入用户昵称"
          ></u--input>
        </u-form-item>
        <u-form-item label="手机号码" prop="phoneNumber" borderBottom>
          <u--input
            v-model="form.phoneNumber"
            border="none"
            placeholder="请输入手机号"
          ></u--input>
        </u-form-item>
        <u-form-item label="钥匙柜用户名" prop="terminalUserName" borderBottom>
          <view class="search_inp">
            <view class="inp">
              <u--input
                v-model="form.terminalUserName"
                border="none"
                placeholder="请输入用户名(有选项则选择没有直接输入全名)"
                @tap.native.stop="openList"
                @input="getTerminalUserList"
              ></u--input>
              <u-icon slot="right" name="arrow-down" :color="color"></u-icon>
            </view>
            <view class="list" v-show="showList">
              <scroll-view
                scroll-y="true"
                class="list_container"
                :show-scrollbar="true"
                scroll-top="0"
              >
                <view class="list_item_box" v-if="terminalUserList.length > 0">
                  <view
                    class="list_item"
                    v-for="(item, index) in terminalUserList"
                    :key="index"
                    @click="clickTerminalUser(item)"
                    >{{ item.showOption }}</view
                  >
                </view>
                <view v-else class="not_data">暂无数据直接输入全名即可</view>
              </scroll-view>
            </view>
          </view>
        </u-form-item>
        <u-form-item
          label="用户身份"
          prop="systemUserType"
          borderBottom
          @click="showUseryPicker = true"
        >
          <myPicker
            :list="useList"
            :show.sync="showUseryPicker"
            @close="closeUserPicker"
            keyName="label"
            v-model="form.systemUserType"
            idName="value"
            title="请选择身份"
            @confirm="changeUser"
          ></myPicker>
        </u-form-item>
        <!-- <u-form-item
          label="用户身份"
          prop="systemUserType"
          borderBottom
          @click="show = true"
        >
          
        </u-form-item> -->
        <!-- <searchPicker
          v-model="show"
          :dataSource="terminalUserList"
          :pickerValues="[0]"
          @recload="confirmHospital"
          :keyName="'showOption'"
          :idName="'value'"
        ></searchPicker> -->

        <!-- <u-form-item label="钥匙柜用户名" prop="terminalUserName" borderBottom @click="clickPickerUser">
          <u--input
            v-model="form.terminalUserName"
            border="none"
            disable
            disabledColor="#ffffff"
            placeholder="请选择"
            @click="clickPickerUser"
          ></u--input>
          <u-icon
            slot="right"
            name="arrow-right"
            :color="color"
          ></u-icon>
        </u-form-item> -->
      </view>
    </u--form>

    <view class="btn">
      <!-- <u-button type="primary" @click="submit" :loading="loading"
        >提交</u-button
      > -->
      <u-button
        class="btn"
        :loading="loading"
        @click="submit"
        shape="circle"
        color="#a22d27"
        customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #ffffff;font-weight:700;"
        >提交</u-button
      >
    </view>
    <mytoast ref="toastRef" />
  </view>
</template>

<script>
import searchPicker from "@/components/searchPicker";
import myPicker from "@/components/myPicker";
import {
  QueryTerminalUserSelectApi,
  UpdateUserInfoApi,
  getUserInfoApi,
} from "@/api/user/index";
import mytoast from "@/components/mytoast.vue";
export default {
  components: {
    mytoast,
    searchPicker,
    myPicker,
  },
  data() {
    return {
      show: false,
      showMonyPicker: false,
      showPicker: false,
      showDatePicker: false,
      showUseryPicker: false,
      showList: false, // 是否显示用户列表
      loading: false,
      terminalUserList: [],
      form: {
        // 预约信息
        realName: "",
        phoneNumber: "",
        numberString: "",
        terminalUserName: "",
        systemUserType: "",
        // designerName: "",
      },
      useList: [
        {
          label: "设计师",
          value: "Designer",
        },
        {
          label: "搭配师",
          value: "Match",
        },
        {
          label: "主播",
          value: "Anchor",
        },
        {
          label: "海外客服",
          value: "AbroadCustomerService",
        },
        {
          label: "客服",
          value: "CustomerService",
        },
        {
          label: "矩阵客服",
          value: "MatrixCustomerService",
        },
        {
          label: "主播客服",
          value: "AchorCustomerService",
        },
        {
          label: "剪辑",
          value: "Edit",
        },
        {
          label: "普通用户",
          value: "Ordinary",
        },
      ],
      Date: null,
      rules: {
        // 验证规则
        realName: {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        numberString: {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        systemUserType: {
          type: "string",
          required: true,
          message: "请选择身份",
          trigger: ["blur", "change"],
        },
        phoneNumber: [
          {
            type: "string",
            required: true,
            message: "请填写联系电话",
            trigger: ["blur", "change"],
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 金额选择器
     */
    changeUser(value) {
      console.log(value, "value");
    },
    /**
     * 关闭金额选择器
     */
    closeUserPicker() {
      this.showUseryPicker = false;
    },
    /**
     * 搜索框输入
     */
    openList() {
      this.showList = true;
      this.form.numberString = "";
      this.form.terminalUserName = "";
    },
    /**
     * 搜索框选择
     */
    clickTerminalUser(item) {
      console.log(item);
      this.form.numberString = item.value;
      this.form.terminalUserName = item.showOption;
    },
    /**
     * 下拉搜索框
     * @param data 选择的数据
     */
    confirmHospital(data) {
      console.log(data, "选择的数据");
      this.form.numberString = data.id;
      this.form.terminalUserName = data.name;
    },
    /**
     * 多选框确认
     */
    // handleConfirm(val) {
    //   this.form.selectedItems = val;
    // },
    /**
     * 多选框
     */
    clickPickerPer() {
      this.showPicker = true;
    },
    /**
     * 点击钥匙柜用户选择器
     */
    // clickPickerUser() {
    //   this.show = true;
    // },
    /**
     * 获取终端用户信息下拉
     */
    async getTerminalUserList(isFirst = false) {
      let data = {
        terminalUserName: this.form.terminalUserName,
      };
      // this.form.numberString = "";
      try {
        let res = await QueryTerminalUserSelectApi(data);
        this.terminalUserList = res.data;
        if (!isFirst) {
          this.showList = true;
        }
      } catch (e) {
        this.$refs.toastRef.showToast({
          msg: e.data.detail,
          duration: 1000,
          position: "center",
        });
      }
    },
    /**
     * 提交
     */
    async submit() {
      let that = this;
      console.log(this.form);
      let action = await this.$refs.uForm.validate();
      if (action) {
        this.loading = true;
        UpdateUserInfoApi(this.form)
          .then((res) => {
            console.log(res, "res");
            this.$refs.toastRef.showToast({
              msg: "申请成功",
              duration: 1000,
              position: "center",
            });
            // 修改后更新用户信息
            this.loading = false;
            var tokenobj = res.data;
            let userinfo = {};
            console.log(tokenobj, "tokenobj");
            that.$store.dispatch("setToken", tokenobj.access_token);
            that.$store.dispatch("setRefresh_token", tokenobj.refresh_token);
            uni.setStorageSync("token", tokenobj.access_token);
            uni.setStorageSync("refresh_token", tokenobj.refresh_token);
            getUserInfoApi().then((response) => {
              userinfo = response.data;
              userinfo.nickname = userinfo.realName;
              userinfo.mobile = userinfo.phoneNumber;
              userinfo.mobile_encrypt = `${userinfo.phoneNumber.substr(
                0,
                3
              )}****${userinfo.phoneNumber.substr(7)}`;
              that.$store.dispatch("setUserInfo", userinfo);
              uni.setStorageSync("userInfo", JSON.stringify(userinfo));
              uni.navigateBack({ delta: 1 });
            });
          })
          .catch((e) => {
            console.log(e);

            uni.hideToast();
            // console.log(e,'e');
            this.loading = false;
            this.$refs.toastRef.showToast({
              msg: e.data.detail,
              duration: 1000,
              position: "center",
            });
          });
      }
    },
  },
  onShow() {
    console.log(this.userInfo);
    this.form.realName = this.userInfo.realName;
    this.form.phoneNumber = this.userInfo.phoneNumber;
    this.form.phoneNumber = this.userInfo.phoneNumber;
    this.form.numberString = this.userInfo.numberString;
    this.form.terminalUserName = this.userInfo.terminalUserName;
    this.form.systemUserType = this.userInfo.systemUserType;
    this.showList = false;
    this.getTerminalUserList(true);
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style>
page {
  background-color: #f5f7fb;
}
</style>

<style lang="scss" scoped>
.pageLayout {
  padding: 20rpx;
  // background-image: linear-gradient(to bottom, #f6eae9 0, #eeeeee 400rpx);
  height: 100vh;
}
.base_info {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 16rpx;
  .title {
    font-size: 28rpx;
    font-weight: bolder;
    padding-left: 50rpx;
    border-bottom: 2rpx solid #eeeeee;
    padding-bottom: 18rpx;
  }
}
.btn {
  position: fixed;
  bottom: 50rpx;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}
.search_inp {
  position: relative;
  .inp {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .list {
    box-shadow: 0rpx 8rpx 10rpx 6rpx rgba(0, 0, 0, 0.3);
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: 80rpx;
    background-color: #ffffff;
    z-index: 999;
    padding: 20rpx;
    // height: 200rpx;
    border-radius: 16rpx;
  }
  .list_container {
    height: 200rpx;
  }
  .list_item {
    padding: 16rpx 0;
    border-bottom: 1rpx solid #eeeeee;
  }
}
</style>
